<template>
<div class="block-box">
    {{props.item.disabled}}
    <table>
        <thead>
            <th v-for="(v,k) in  props.item.form" > {{v.label}} </th>
            <th>操作</th>
        </thead>  
        <tbody > 
            <tr v-for="(row,index) in getRows()" >
                <td v-for="(column,key) in row">
                    <ComFormSpan :item="column" :form="props.form[props.item.prop][index]" />
                </td>
                <td class="btn-classs">
                    <el-tag size="default" @click="props.disabled ? null: addRow(index)">新增</el-tag>
                    <el-tag type="danger" size="default" @click="props.disabled ? null : deleteRow(index)">删除</el-tag>
                </td>
            </tr>
        </tbody>
    </table>  
</div>      
</template>
<script setup>
import ComFormSpan from './ComFormSpan'
const props = defineProps({
    item:{
            required:true,
            type:Object,
        },
        form:{
            required:true,
            type:Object,
        },
        disabled:{
            required:true,
            type:Boolean,
            default:false,
        }
})
let tableForm=reactive({})
const emits = defineEmits();
watch(props.form, (value) => {
    // emits('update:form',value)
    props.form=value
})
function getFormInfo(){
    var f = props.item.form ; 
            var temp = {} ;
            for(var i in  f){
                var prop = f[i].prop ;
                var type =  f[i].type ;
                if(type == 'select' || type == 'radio' || type == 'checkbox'
                            || type == 'checkbox-button' || type == 'radio-button'
                            || type == 'conditions' || type == 'btns' ){
                    temp[prop] = [] ;            
                }else if (type == 'switch'){
                    temp[prop] = false ;
                }else{
                    temp[prop] = '' ;
                }
            }
            return temp ;
} 
function addRow(index){
    var obj = getFormInfo();
            var length = props.form[props.item.prop].length ; 
            if(!length || length == 0){
                props.form[props.item.prop] = [] ;
            } 
            props.form[props.item.prop].splice(index+1,0,obj);
            // props.form[props.item.prop].push(obj);
            if( props.item.events && props.item.events.addRow ){
                props.item.events.addRow();
            } 
} 
function deleteRow(index){
    console.log(index);
            if(index == 0 && props.form[props.item.prop].length == 1){
                props.form[props.item.prop] = [];
                var obj = getFormInfo();
                props.form[props.item.prop].push(obj);
                return ;
            };
            props.form[props.item.prop].splice(index,1);
            if( props.item.events && props.item.events.deleteRow ){
                props.item.events.deleteRow();
            } 
} 
function getRows(){
    var options = props.form[props.item.prop];
            var row = props.item.form ;
            var temp = [];   
            if(options  && options.length > 0){
                for(var i =0 ;i < options.length ; i++){
                    temp.push(row)
                }    
            }else{
                temp.push(row) ;
                addRow();
            }
            return temp;
} 
function isShow(){
    if( props.item.events && props.item.events.isShow ){
                return props.item.events.isShow();
            } 
            return true;
} 

</script>
<style scoped>

table{
  border-collapse: collapse;
  margin: 0 auto;
  text-align: center;
  
 
 }
table td, table th{
  color: #666;
  height: 30px;
  padding:0px;
  border: 1px solid #eaeaea;
  border-radius: 10px;
}
table thead th{
  width: 100px;
  text-align:left;
}
.el-table{
  overflow-x:auto;
  overflow-y:auto;
}
.el-input{
    margin:0px;
}
.el-select{
    margin:0px;
}
.btn-class{
    margin-left:20px;
    vertical-align:middle;
    cursor:pointer;
    float:left;
    text-align:left;
}
.el-tag{
    cursor:pointer;
    float:left;
}
</style>